<template>
    <div class="album albumvideo">
        <div>
            <div class="type_title">
                视频介绍
            </div>
            <div class="pic_img">
                <div class="pic_img_box">
                    <el-upload class="avatar-uploader"
                            :action="action"
                            v-bind:data="{FoldPath:'',SecretKey:''}"
                            v-bind:on-progress="uploadVideoProcess"
                            v-bind:on-success="handleVideoSuccess"
                            v-bind:before-upload="beforeUploadVideo"
                            v-bind:show-file-list="false">
                        <video v-if="videoForm.showVideoPath !='' && !videoFlag"
                            v-bind:src="videoForm.showVideoPath"
                            class="avatar video-avatar"
                            controls="controls">
                            您的浏览器不支持视频播放
                        </video>
                        <i v-else-if="videoForm.showVideoPath =='' && !videoFlag"
                        class="el-icon-plus avatar-uploader-icon"></i>
                        <el-progress v-if="videoFlag == true"
                                    type="circle"
                                    v-bind:percentage="videoUploadPercent"
                                    style="margin-top:7px;"></el-progress>
                    </el-upload>
                </div>
            </div>
        </div>
        <p class="Upload_pictures">
            <span></span>
            <span>最多可以上传1个视频，建议大小100M，推荐格式mp4</span>
        </p>
    </div>
</template>
<script>
export default {
    name:"video-upload",
    props:["id","data"],
    data(){
        return{
            action:"",
            videoFlag: false,
            //是否显示进度条
            videoUploadPercent: "",
            //进度条的进度，
            isShowUploadVideo: false,
            //显示上传按钮
            videoForm: {
                showVideoPath: ''
            },
            pId:"",
            cId:""
        }
    },
    created(){
        let ids=this.id.split(".");
        this.pId=ids[0];
        this.cId=ids[1];
        this.action="/business/api/file/fileUpload?isVideo=Y&token="+sessionStorage.getItem("token")
        if(this.data[this.pId][this.cId]){
             this.isShowUploadVideo = true;
            this.videoFlag = false;
            this.videoUploadPercent = 0;
            this.videoForm.showVideoPath = this.data[this.pId][this.cId];
        }
    },
    methods: {
        //上传前回调
        beforeUploadVideo(file) {
            var fileSize = file.size / 1024 / 1024 < 50;
            if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) {
                layer.msg("请上传正确的视频格式");
                return false;
            }
            if (!fileSize) {
                layer.msg("视频大小不能超过100MB");
                return false;
            }
            this.isShowUploadVideo = false;
        },
        //进度条
        uploadVideoProcess(event, file, fileList) {
            this.videoFlag = true;
            this.videoUploadPercent = file.percentage.toFixed(0) * 1;
        },
        //上传成功回调
        handleVideoSuccess(res, file) {
            console.log("res=====================================")
            this.isShowUploadVideo = true;
            this.videoFlag = false;
            this.videoUploadPercent = 0;
                
            //前台上传地址
            //if (file.status == 'success' ) {
            //    this.videoForm.showVideoPath = file.url;
            //} else {
            //     layer.msg("上传失败，请重新上传");
            //}
            console.log(res,"res================")
            console.log(this.id,"id-============")
            this.videoForm.showVideoPath = res[0].url;
            this.data[this.pId][this.cId]=res[0].url;
            //后台上传地址
            
        }
    }
}
</script>
<style scoped>
    .type_title{
        width:100%;
        height:30px;
        padding:10px;
        font-weight: bold;
    }
    .avatar-uploader{
        height:300px;
        overflow:hidden;
    }
    .el-upload i{
        font-size:50px;
        position:absolute;
        top:38%;
        left:150px;
    }
   
    .pic_img_box{
        border:1px solid #ddd;
        margin-left:10px;
    }
    video{
        height:300px;
    }
</style>